<template>
	<view class="container">
		<u-navbar :is-fixed="false" :border-bottom="false" :is-back="true" back-icon-name="arrow-leftward"
			back-icon-size="35" :background="{ background: '#fff' }" title="事件详情" title-color="#000">
		</u-navbar>
		<u-tabs :list="tabList" :is-scroll="false" :current="current" @change="handleChange"></u-tabs>
		<view class="body">
			<view v-if="current==0">
				<view>网格上报</view>
				<view>环境卫生 / 积存垃圾渣土（建筑装修垃圾）</view>
				<view>香汕公馆二期供暖问题，上次诉求显示已解决，但是还有半个月供热了，供暖费现在还是不能交纳。香汕公馆二期供暖问题，上次诉求显示已解决，但是还有半个月供热了，供暖费现在还是不能交纳</view>
				<view></view>
				<view>上报人信息</view>
				<view></view>
				<view>位置信息</view>
				<view>
					发生地网格：胶州市-九龙街道-回龙新村-大户
					事件位置：山东省青岛市胶州市九龙街道204国道
				</view>
			</view>
			<view v-if="current==1">
				<NayunSteps v-for="item in 5" />
			</view>

		</view>
		<view class="footer">
			<u-button type="error" @click="showReturn=true">退回</u-button>
			<!-- <u-button type="primary">派单</u-button>
			<u-button type="primary">确认接单</u-button>
			<u-button type="primary">其他</u-button>
			<u-button type="primary">添加进展</u-button> -->
			<u-button type="primary" @click="handleVerify">去核实</u-button>
		</view>
		
		<u-modal v-model="showReturn" title="事件退回" :show-cancel-button="true" cancel-color="red">
			<view class="slot-content">
				退回原因：
				<u-input v-model="form.returnReason" type="textarea" :border="true" />
			</view>
		</u-modal>
	</view>
</template>

<script>
	import NayunSteps from "@/components/nayun-steps/index.vue"
	export default {
		components: {
			NayunSteps
		},
		data() {
			return {
				form:{},
				data: {},
				tabList: [{
					name: '事件信息'
				}, {
					name: '处置流程',
				}],
				current: 0,
				showReturn:false,
			};
		},
		methods: {
			handleChange(index) {
				this.current = index;
			},
			handleVerify(){
				uni.navigateTo({
					url:"/pages/event/verify"
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		.header {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 5;
			background-color: #fff;
		}

		.blank {
			height: 250rpx;
		}
	}

	.body {
		flex: 1;
	}

	.footer {
		display: flex;
	}
</style>